ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  li {
    padding: 10px;
    padding-left: 30px;
    font-weight: bold;
    border: 1px solid #efefef;
    &:nth-of-type(even) {
      background: #efefef;
    }
    button {
      background: rgb(252, 59, 59);
      color: white;
      border: 2px solid #ccc;
      border-radius: 5px;
      margin-right: 20px;
      cursor: pointer;
      outline: none;
      &:active {
        background: #800;
        border: 2px solid #aaa;
      }
    }
  }
}

.smooth-enter {
  opacity: 0;
  transform: translateY(100%) scale(0);
}
.smooth-enter-active {
  transition: all .5s ease-in-out;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.smooth-exit {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.smooth-exit-active {
  transition: all .5s ease-in-out;
  opacity: 0;
  transform: translateY(100%) scale(0);
}